<template>
  <div class="my-collect router-fixed">
  	<shop-header>	
			<h2>申请提现</h2>	
		</shop-header>
		<div class="asset-wrapper">
			<div class="balance">当前可用余额 <b>99.99</b> 元</div>
			<div class="recharge-top">
				<h3>提现金额金额</h3>
				<span class="select-all">全部提现</span>
				<div class="recharge-box">
					<span>¥</span>
					<input class="input" type="text" >
				</div>
			</div>
			<group gutter="0">
				<cell title="提现方式" :value="typeText" is-link @click.native="openPopup"></cell>
			</group>
			<div class="btn">
				<mu-flat-button label="提交申请" backgroundColor="#ff5e5d" tag="button" />
			</div>
		</div>
		<v-popup title="选择提现方式" @change-type="changeType" ref="popupWrapper"></v-popup>
  </div>
</template>

<script>
import { Group, Cell } from 'vux'
import ShopHeader from '@/components/public/ShopHeader'
import VPopup from '@/components/public/Popup'	
export default {
	components: {
		ShopHeader,
		FooterNav,
		Group,
		Cell,
		VPopup
	},
	data () {
		return {
			type: ''
		}
	},
	computed: {
		typeText () {
			if (this.type == '') return '请选择支付方式'
			return this.type
		}
	},
  methods: {
  	changeType (val) {
  		this.type = val
  	},
  	openPopup () {
  		this.$refs.popupWrapper.toggleShow()
  	}
  }
}
</script>

<style scoped>
.balance {
	padding: 10px 15px;
	font-size: 14px;
	color: #333;
}
.balance b {
	color: #f74c31;
}
.recharge-top {
	position: relative;
	background: #fff;
	padding: 15px;
}
.recharge-top h3 {
	font-size: 14px;
	color: #999;
	padding-bottom: 10px;
}
.select-all {
	position: absolute;
	right: 15px;
	top: 20px;
	font-size: 12px;
	color: #42b983;
}
.recharge-box {
	display: flex;
}
.recharge-box span {
	flex: 0 0 auto;
	margin-right: 8px;
	font-size: 18px;
	color: #333;
}
.recharge-box input {
	font-size: 24px;
	color: #333;
	height: 24px;
	line-height: 24px;
	border: 0;
	outline: none;
}
.btn {
	padding: 15px;
}
.btn button {
	width: 100%;
	color: #fff;
	height: 42px;
}
</style>
